<template>
  <view class="container">
    <view class="main">
      <view class="head">
        <view class="head-image">
          <image :src="head_image" style="height: 120rpx; width: 120rpx" />
        </view>
        <view class="info">
          <text>{{ nickname }}</text>
        </view>
        <view class="tomato">
          <image src="/static/tomato.png" style="width: 32rpx; height: 32rpx" />
          <text>{{ tomato }}</text>
        </view>
      </view>
      <navigator class="item" url="/pages/tab/my/linking-list">
          <text>排行榜</text>
      </navigator>
      <view class="item">
        <text>允许暂停:</text>
        <switch class="switch" :checked="allow_stop" @change="onChange"></switch>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "my",
  mounted() {
    this.$store.dispatch("getInfo");
  },
  computed: {
    head_image() {
      return this.$store.state.head_image;
    },
    nickname() {
      return this.$store.state.nickname;
    },
    tomato() {
      return this.$store.state.tomato;
    },
    allow_stop() {
      return this.$store.state.allow_stop;
    },
  },
  methods: {
    onChange(res) {
      console.log(res.detail.value);
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background: #f8f8f8;
}
.container > .main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  overflow-x: hidden;
}
.head {
  display: flex;
  width: 100%;
  justify-content: center;
  box-sizing: border;
  background: white;
  height: 200rpx;
  padding: 30rpx;
  box-sizing: border-box;
}
.head > .head-image {
  width: 120rpx;
  height: 100%;
  margin-left: 16rpx;
}
.head > .info {
  font-size: 32rpx;
  line-height: 32rpx;
  margin-right: auto;
  margin-left: 24rpx;
}
.head > .tomato {
  align-self: flex-end;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
}

.item {
  padding-left: 118rpx;
  box-sizing: border-box;
  height: 128rpx;
  width: 100%;
  font-size: 42rpx;
  display: flex;
  align-items: center;
  background: white;
  margin-top: 32rpx;
}
.switch {
  margin-left: auto;
  margin-right: 56rpx;
}
</style>